<template>
    <div>
        <a-modal
            :title="view?'查看培训老师':(formState.id?'编辑培训老师':'添加培训老师')"
            :visible="visible"
            @ok="addTrainingHandleOk()"
            @cancel="visible = false"
            :width="800"
            :forceRender="true"
        >
            <div>
                <a-form-model
                    :key="ruleFormKey"
                    :id="randomId"
                    class="trainingSessions-form0-model-big-box"
                    ref="ruleForm2"
                    :model="formState"
                    :rules="rules"
                    layout="inline"
                >
                    <a-descriptions bordered style="width: 100%;">
                        <a-descriptions-item :span="6">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                培训老师姓名
                            </span>
                            <a-form-model-item ref="fjsxm" prop="fjsxm">
                                <a-input
                                    v-model="formState.fjsxm"
                                    placeholder="请输入培训老师"
                                />
                            </a-form-model-item>
                        </a-descriptions-item>
                        <a-descriptions-item :span="6">
                            <span slot="label" class="descriptions-label-slot">
                                <span class="xhText" >*</span>
                                老师培训内容
                            </span>
                            <a-form-model-item ref="fjspxnr" prop="fjspxnr" class="zm-form-model">
                                <div style="width: 100%;">
                                    <a-textarea 
                                        style="width: 100%;"
                                        v-model="formState.fjspxnr"
                                        :autosize="{ minRows: 2, maxRows: 10000 }"
                                        placeholder="请输入老师培训内容"
                                    ></a-textarea>
                                </div>
                            </a-form-model-item>
                        </a-descriptions-item>
                        
                    </a-descriptions>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    jcylxjhaddPxls,
    jcylxjhupdatePxls,
} from './service/index'
import assessCheckApi from './service/api'
import moment from 'moment'
export default {
    components:{
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            ruleFormKey:null,
            randomId:'randomId'+new Date().getTime(),
            formState:{},
            rules: {
                fjsxm: [{ required: true, message: '请输入培训老师姓名', trigger: 'change' }],
                fjspxnr:[{ required: true, message: '请输入老师培训内容', trigger: 'change' }],
                
            },
            view:false,
            
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,view){
            this.view = view
            this.formState = row
        },
        addTrainingHandleOk(){
            this.$refs.ruleForm2.validate(valid => {
                if (valid) {
                    let data = {
                        ...this.formState,
                    }
                    if(this.formState.id){
                        jcylxjhupdatePxls(data).then(res=>{
                            if(res.code == 200){
                                this.visible = false
                                this.$message.success(res.message)
                                this.$emit('refreshTrainingTeacher')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        jcylxjhaddPxls(data).then(res=>{
                            if(res.code == 200){
                                this.visible = false
                                this.$message.success(res.message)
                                this.$emit('refreshTrainingTeacher')
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            })
        },
    }
}
</script>
<style lang="less">
    .trainingSessions-form0-model-big-box{
        padding: 0 15px;
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 5px 10px !important;
            
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            width: 95px !important;//确保左侧固定文字不会换行
            justify-content: flex-end;
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{
            
        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
        
    }
</style>